<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Hi，前端伙伴！</title>
  <link rel="stylesheet" href="/css/view/index.css">
  <link rel="icon" href="/images/上方小图标/位图/上方小图标.png">
</head>

<body>
  <!-- 导航栏 -->
  <div class="Navigation">
    <ul>
      <a href="/">
        <li>
          <img src="/images/public/矢量图/首页.svg" alt="">
          首页
        </li>
      </a>

      <a href="/rain">
        <li>
          <img src="/images/public/矢量图/暴风雨.svg" alt="">
          暴风雨
        </li>
      </a>

      <a href="/home">
        <li>
          <img src="/images/public/矢量图/动态.svg" alt="">
          动态
        </li>
      </a>

      <a href="/profile">
        <li>
          <img src="/images/public/矢量图/我的空间.svg" alt="">
          我的空间
        </li>
      </a>

      <a href="/setting ">
        <li>
          <img src="/images/public/矢量图/设置.svg" alt="">
          设置
        </li>
      </a>
    </ul>
    <!-- 登录和注册按钮 -->
    <div class="toLogin">
      <a href="/login">登录</a>
      <span>/</span>
      <a href="/register">注册</a>
    </div>
  </div>
  <!-- 上方背景图的内容 -->
  <div class="index">
    <div class="PaperPlaneBox">
      <img class="PaperPlane" src="/images/index/矢量图/纸飞机.svg" alt="">
    </div>
    <div class="Logo">
      <h1>Hi,前端伙伴!</h1>
    </div>
    <div class="titleBox">
      <img class="toLeft" src="/images/index/矢量图/向左.svg" alt="">
      <img class="toRight" src="/images/index/矢量图/向右.svg" alt="">
      <p class="text">"A new day begins with npm run dev and npm run serve."</p>
      <div class="LogoBox">
        <a href="https://music.163.com/#/my/m/music/playlist?id=973798174" target="_blank">
          <img class="index-wangyi-logo" src="/images/index/位图/网易云音乐logo.png" title="网易云音乐" alt="网易云音乐logo">
        </a>

        <a href="https://weibo.com/7112859998/profile?topnav=1&wvr=6" target="_blank">
          <img class="index-weibo-logo" src="/images/index/位图/微博logo.png" title="微博" alt="微博logo">
        </a>
      </div>
    </div>
    <div class="toBottomBox">
      <img class="toBottom" src="/images/index/矢量图/向下箭头.svg" alt="">
    </div>
  </div>
  <!-- 三背景图下方的三段文字 -->
  <div class="say">
    <div class="sayData">
      <fieldset>
        <legend>返璞归真</legend>
      </fieldset>
      <p>身处在前端社区的繁荣之下，我们都在有意或无意地追逐。奔赴在返璞归真的漫漫征途，自信并勇敢着，追寻于原生态的书写指令，试图以最简单的方式诠释高效。</p>
    </div>
    <div class="sayData">
      <fieldset>
        <legend>洗尽铅华</legend>
      </fieldset>
      <p>终有一天，昔日的痛苦与欢乐都会变成同样的颜色，唯留一颗平静的心，碾过灵魂的支点，站成永恒。洗尽铅华，是一种生命淡如水的境界；是繁华后的宁静;是远离喧嚣的清澈。</p>
    </div>
    <div class="sayData">
      <fieldset>
        <legend>星辰大海</legend>
      </fieldset>
      <p>如果眼下还是一团零星之火，那运筹帷幄之后，迎面东风，就是一场烈焰燎原吧，那必定会是一番尽情的燃烧。</p>
    </div>
  </div>
  <!-- 展示内容 -->
  <div class="Exhibition">
    <p>全新网站：<a target="_blank" href="http://tianyuhao.icu">Tyh</a></p>
    <p>Tyh-ui：<a target="_blank" href="http://tyhui.tianyuhao.icu">Tyh</a></p>
  </div>
  <!-- 页脚 -->
  <div class="footer">
    <p>从2020年10月21日12:00开始到现在，这个项目已经制作了：
      <span class="day">00</span>天
      <span class="hours">00</span>小时
      <span class="minutes">00</span>分钟
      <span class="seconds">00</span>秒
    </p>
  </div>

  <script src="/js/myJS/My_JS.js"></script>

  <script>
    // 左右换图效果
    let minIndex = 1; maxIndex = 3; Index = minIndex;

    // 向右换图
    $(".toRight").onclick = function () {
      if (Index === maxIndex) {
        Index = minIndex;
      } else {
        Index++;
      }
      $(".index").style.backgroundImage = `url('/images/index/位图/上方背景图 (${Index}).jpg')`;
    }

    // 向左换图
    $(".toLeft").onclick = function () {
      if (Index === minIndex) {
        Index = maxIndex;
      } else {
        Index--;
      }
      $(".index").style.backgroundImage = `url('/images/index/位图/上方背景图 (${Index}).jpg')`;
    }


    // 点击向下滚动效果
    $(".toBottom").onclick = function () {
      // smooth(平滑滚动),instant(瞬间滚动),默认值auto,
      window.scrollTo({
        top: 650,
        behavior: "smooth"
      })
    }


    setInterval(() => {
      // 计算网页制作的时间
      const nowStamp = new Date().getTime(); // 获取到当前时间戳
      const targetStamp = new Date("2020-10-21 12:00").getTime(); // 获取目标时间戳

      let difference = nowStamp - targetStamp; //现在的时间戳 - 目标日期的时间戳 = 相差的时间戳
      let allSeconds = Math.floor(difference / 1000); //计算距离目标时间总计有多少秒
      let allMinutes = Math.floor(allSeconds / 60); //计算距离目标时间总计有多少分钟
      let allHours = Math.floor(allMinutes / 60);
      let day = Math.floor(allHours / 24);
      let hours = allHours % 24;
      let minutes = allMinutes % 60;
      let seconds = allSeconds % 60;
      $(".day").innerHTML = day;
      $(".hours").innerHTML = hours;
      $(".minutes").innerHTML = minutes;
      $(".seconds").innerHTML = seconds;
    }, 1000);

  </script>
</body>

</html>